今日主題

進度回顧
Day 17 既然要存待讀清單，不應該是手動吧! 以 Chrome Extension 存取

前一天進度是做 Chrome extension，解決我不想手動儲存記錄的問題，可以直接在電腦上快速儲存。不過，這個設計主要是桌機情境可用上，滑手機時則不行。

所以今天目標是：透過 Line Bot，能即時把想儲存的連結自動存進資料庫

為什麼想做

• 往往是在滑手機的時候，有很多資料想收
• Line 是目前常開的 channel

思考怎麼做

*目前已有的

• Base44 資料庫& API - 有完整資訊和權限
• 手上有 n8n 工具，適合做這類自動化

流程預設
手機分享連結到指定 Line BOT，觸發流程後至少自動抓取標題、連結存入指定資料庫

手機看到文章 
    ↓
點擊「分享」→ 到 Line BOT
    ↓
發送 URL + Title 到 n8n Webhook
    ↓
n8n 處理資料（加上當前日期等）
    ↓
呼叫 Base44 API 儲存
    ↓
✅ 完成！

總結需要做的事

1. 建立 LINE Bot

• LINE Developers Console
• 建立 Messaging API Channel
• 取得 Channel Access Token 和 Channel Secret

2. 在 n8n 建立 Workflow

• 使用 LINE Trigger 或 Webhook
• 處理訊息並呼叫 Base44 API & 存入資料
• 可選：讓 Bot 回覆確認訊息

成果驗收

n8n Workflow：已能完成核心功能，但整體完成度90%

1.Webhook（入口）

• 接收來自 LINE 的訊息
• 當用戶傳送訊息給 Bot 時，LINE 會發送 POST 請求到這個 webhook

2.Extract Message（提取訊息）

• 從 LINEJSON 結構中提取三個資訊
  • text: 用戶傳送的完整文字
  • reply_token: LINE 用來回覆訊息的憑證
  • url: 用正則表達式從文字中抓取網址

3.IF（判斷是否有網址）

• 檢查是否成功提取到 URL
• 有網址 → 進入儲存流程
• 沒網址 → 回覆錯誤訊息

4.Fetch Webpage（抓取網頁）

• HTTP GET 請求去抓取該網址 HTML 內容
• 設定 User-Agent 假裝是瀏覽器，避免被網站封鎖
• 設定 10 秒超時，避免卡住

5.Extract Title（提取標題）

• 用 $('Extract Message') 回頭抓取原始的 URL 和 reply_token（因為 HTTP Request 會覆蓋掉這些資料）
• 從 HTML 中用正則表達式找 標籤
• 如果找不到，再找 Open Graph 的 og:title
• 如果都找不到，就用 URL 當標題
• HTML 實體字元（& 等）轉換成正常字元

6.Prepare Data（準備資料)

• url: 網址
• title: 標題
• saved_date: 今日日期
• is_completed: false（預設未完成）
• status: "active"（啟用狀態）
• reply_token: 保留給後面回覆用 >> 這邊失敗

7. Save to Base44（儲存到資料庫）

• 用 HTTP POST 把資料送到 Base44 API
• 用 raw JSON 格式，避免格式錯誤
• 帶 api_key 做身份驗證

8. LINE Reply Success（回覆成功訊息） >> 目前失敗

• 呼叫 LINE Messaging API
• 用 replyToken 回覆用戶
• 訊息包含標題和網址的確認
• 設定 onError: continueRegularOutput，即使回覆失敗也繼續執行

9. LINE Reply Error（回覆錯誤訊息）

• 當沒有偵測到網址時執行
• 提示用戶傳送有效的網址

10. Respond to Webhook（回應 LINE）

• 回傳 200 OK 給 LINE，告訴 LINE 我們已經收到訊息
• 必須在 30 秒內回應，否則 LINE 會認為 webhook 失效

連結存入指定資料庫

可成功觸發並讓資料往下走

網頁可帶入標題&連結

YT 標題抓取失敗

結論是：勉強可用 !

今日總結

心得一：
雖然 MCP 快建立工作流程，但在資料傳輸過程中，還是會發生一直鬼打牆。有時可以很直覺地請它按照我的想法直接減少節點或抓取資料，但有時連自己都不確定要怎麼解請他直接修復錯誤時，如果一旦成功，更多時間是花在為什麼這個處理方式可行? 那本來我預期方式是少想了些什麼？覺得這個流程是最燒腦的，但如果想通很有幫助。

心得二：
這次用 Sonnet 4.5 模型來處理這個工作流。體感上跟對於整個工作流程的規劃很仔細跟合理，而且蠻能追蹤現在已經進行到哪個步驟，並且依照步驟依序完成，然後告訴我下一步處裡事項，甚至比我還急，比如說發生這樣的對話，是不能給我點思考時間嗎!!

或者，我只是剛好順手想安裝一下 GitHub MCP，也會奉勸我先不要 (?? 到底為何比我還急

但整體來說，Sonnet 4.5 最有感的應該就是流程變得比以往更清楚，就算繞回去討論前面突然想到的問題和先做其他流程，也能很順暢接回來跟統整接下來需要做的事項，很加分。但是不是一直這麼穩定，需要再多試不同專案。

心得三：到目前為止，即使預設上都很簡單或直覺的流程，都很難有一次就做到完美的自動化，但就是不斷在踩坑、修改和debug，習慣就好。

所以總結來說：

AI 幫了我什麼

• 工作項目排程規劃
• 直接建立 n8n Workflow

我做了什麼

• 釐清在哪個工具處理我想要的流程
• 授權驗證資訊
  • 資料庫 API 資訊
  • LINE BOT Channel
• 提供目前資料庫 Schema 格式讓 Claude 透過 n8n MCP 自動幫我建立流程

遇到的挑戰

• 問題1：標題抓取 - 不是所有連結分享都會帶標題，所以追求資訊完整的話，目前需要：

  • 手動輸入
  • 或讓 n8n 去爬網頁抓標題

• 解法：

  • 當下儲存時，其實自己清楚為什麼想看。所以只要能找回最重要的連結，有個統一地方集中管理，就能解決我的需求
  • 「能不能正確抓到標題」，技術上可研究，但整體 CP 值不高，
  • 結論是先放放

• 問題2 ：Preview Image - 如果要自動抓預覽圖，需要額外的處理步驟

  • 解法：自動抓取網頁的 og:image
  • 結論：同問題1，決定先放放

累計下一步清單
合計第8/16/17/18天做完待優化項目

• 趣味性

  • 情境上如果要更 RPG 風格，CTA 動畫或者是音效功能，單純就是娛樂性考量

• 功能性

  • 影音或文章自動抓取預覽或標題

• 易用性

  • 建立後端函數來接收資料 Chrome Extention 觸發的資料